<!--
  组件：鼠标位置控件(vue2)
  作者：kuake
  时间：2023年09月24日
  网址：https://gis.1024ape.com
  系统：WebGIS 地理信息平台
-->
<template>
	<div class="ape-mouse-position-control">
		<div>经 度 : {{ lon }}</div>
		<div>纬 度 : {{ lat }}</div>
	</div>
</template>
<script>
import { toLonLat } from 'ol/proj'
import { mapState } from 'pinia'
import { useMapStore } from '../../stores/mapStore'

export default {
	name: 'FmScaleLine',
	computed: {
		...mapState(useMapStore, ['map'])
	},
	data() {
		return {
			lon: 0,
			lat: 0
		}
	},
	watch: {
		map() {
			// 默认初始状态为地图中心点坐标
			this.pointerEvent({
				coordinate: this.map.getView().getCenter()
			})
			this.map.un('pointermove', this.pointerEvent)
			this.map.on('pointermove', this.pointerEvent)
		}
	},
	methods: {
		pointerEvent(event) {
			const coordinate = event.coordinate
			// 转换坐标为经纬度
			const lonLat = toLonLat(coordinate)
			// 更新 Overlay 元素的内容
			this.lon = lonLat[0].toFixed(4)
			this.lat = lonLat[1].toFixed(4)
		}
	}
}
</script>

<style scoped lang="scss">
.ape-mouse-position-control {
	position: absolute;
	width: 8.5rem;
	bottom: 0.5rem;
	left: 0.5rem;
	background-color: #000;
	padding: 0.5rem;
	border-radius: 2px;
	font-size: 0.8rem;
	box-sizing: border-box;
	color: #fff;
}
</style>
